<template>
  <div class="list-layout-container q-pb-lg">
    <q-img v-if="!hideTopImage" class="top-picture" width="" :src="topImg | serverImage"></q-img>

    <div class="list-content relative-position bg-white column q-pa-md"
        :style="{paddingLeft:paddingLeft}">
      <bread-crumbs
        v-if="!hideCrumbs"
        :canBack="canBack"
        class="list-page-bread-crumbs q-mb-sm"></bread-crumbs>

        <slot name="top"></slot>

      <div class="row no-wrap full-width">
        <div class="category-list" v-if="categories">
          <div class="category cursor-pointer q-pl-lg row items-center"
            :class="{active:idxActive===idx}"
            v-for="(cat, idx) in categories || []" :key="idx"
            @click="categoryClicked(cat, idx)">
            {{$t(cat?.text)}}
          </div>

          <slot name="bottom-of-categories"></slot>
        </div>
        <div class="list column col" :class="{ 'no-category': !categories}">
          <div class="filters"></div>
          <div class="items full-width">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="bottom-cards row full-width no-wrap justify-center q-py-lg">
      <q-img
        v-for="(card, idx) in bottomCards || []"
        :key="idx"
        :src="assets.卡片图[card?.name] | serverImage"
        :ratio="1"
        width="368px"
        height="110px"
        basic
        spinner-color="white"
        class="card rounded-borders cursor-pointer"
        @click="card?.url && $router.push(card?.url)"
      >
        <div class="card-text absolute-full text-subtitle2 flex flex-center column">
          <div style="font-size: 20px;margin-bottom: 5px">{{ $t(card?.text) }}</div>
          <div style="font-size: 14px">{{ card?.english }}</div>
        </div>
      </q-img>
    </div> -->
    <!-- <scroll-top></scroll-top> -->
  </div>
</template>

<script>
// import scrollTop from './scrollTop.vue';

export default {
  name: 'ListLayout',
  props: {
    categories: { type: Array },
    channel: { type: String },
    paddingLeft: { type: String, default: '' },
    originalCategory: { type: Object },
    hideCrumbs: { type: Boolean, default: false },
    canBack: { type: Boolean, default: false },
    hideTopImage: { type: Boolean, default: false },
  },
  components: {
    // scrollTop,
  },
  data() {
    return {
      idxActive: 0,
      topImg: '',
      assets: {
        卡片图: [],
      },
      bottomCards: [
        {
          name: 'feedback',
          text: '咨询留言',
          english: 'Consultation',
          url: '/feedback',
        },
        {
          name: 'qa',
          text: '常见问题',
          english: 'Q & A',
          url: '/qa',
        },
        {
          name: 'about',
          text: '关于我们',
          english: 'About Us',
          url: '/about',
        },
      ],
    };
  },
  watch: {
    originalCategory(v) {
      this.setCategory(v);
    },
    categories() {
      this.setCategory(this.originalCategory);
    },
  },
  created() {
    this.setCategory(this.originalCategory);
  },
  beforeMount() {
    // 卡片背景图等资源信息
    this.getRequest('/portal/assets?bottom=true').then((d) => {
      this.assets = (d && d.data) || {};
    });

    // 顶部背景图
    if (this.channel) {
      this.getRequest(`/portal/channel/${this.channel}`).then((d) => {
        this.topImg = ((d && d.data) || {}).img;
      });
    }
  },
  methods: {
    setCategory(v) {
      if (v && v.text) {
        const idx = (this.categories || []).findIndex((cat) => cat.text === v.text);

        if (idx >= 0) {
          this.categoryClicked(v, idx, false);
        }
      }
    },
    categoryClicked(cat, idx, emit = true) {
      // if (idx === this.idxActive) return;

      this.idxActive = idx;

      if (emit) {
        this.$emit('changed', cat.filter, cat);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list-layout-container {
  background-color: #f7f7f7;
}

.top-picture {
  height: 240px;
}
.list-content {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: -25px;
  border-radius: 8px;
  padding-top: 10px;
  padding-bottom: 0;

  .no-category {
    margin-left: 22px;
  }
  .category-list {
    width: 193px;
    margin: 0px 46px 0 22px;
    .category {
      font-size: 15px;
      color: #265fb3;
      height: 45px;
      background: linear-gradient(to right, #dce5f3, #f6f9fc);
      &:hover {
        background: linear-gradient(to right, #c7d7f0, #edf3f9);
      }
      &.active{
        background: #265fb3;
        color: #ffffff;
      }
      &:not(:first-child) {
        margin-top: 5px;
      }
    }
  }
}

.bottom-cards {
  .card:not(:last-child) {
    margin-right: 24px;
  }
}
</style>

<style lang="scss">
.list-layout-container {
  .list-content {
    .list-page-bread-crumbs{
      font-size: 15px;
      color: #666666;
      padding-left: 22px;

      .q-breadcrumbs__el {
      color: #666666;
      }
    }
    .list {
      .items {
        .list-top-text {
          border-bottom: 1px solid #d8d8d8;
          padding-bottom: 18px;
          font-size: 18px;
          color: #666666;
          &::before {
            content: "";
            width: 6px !important;
            height: 27px !important;
            border: 3px solid #265fb3;
            margin-right: 14px;
          }
        }

        .filter-options-option, .filter-label {
          font-size: 1rem;
        }
      }
    }
  }
}

</style>
